<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title><个人资料></个人资料></title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="/css/plugins/morris/morris-0.4.3.min.css">
    <link rel="stylesheet" href="/js/plugins/gritter/jquery.gritter.css">
    <link rel="stylesheet" href="css/plugins/dropzone/basic.css">
    <link rel="stylesheet" href="css/plugins/dropzone/dropzone.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/css/plugins/toastr/toastr.min.css">
    <style>
        /*模态框导致页面偏移问题*/
        .modal-open {
            overflow-y: scroll;
        }
        #imgPreview {
            width: 40%;
            height: 180px;
            margin: 10px auto 0 auto;
            text-align: center;
        }
        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }
        #imgSpan {
            position: absolute;
            top: 60px;
            left: 65px;
            font-size: 24px;
        }
        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
        .toast-center-center {
            left: 50%;
            top: 35%;
            transform: translate(-50%,-50%);
        }

    </style>
</head>
<body>
<div id="wrapper">
    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>个人资料</h5>
                        </div>
                        <div class="ibox-content" style="padding: 0">
                            <div style="float: right;margin-right: 200px;margin-top: 20px">
                                <button type="button" class="btn btn-primary" data-target="#updateModel" data-toggle="modal">编辑</button>
                            </div>
                            <div style="margin-left: 15%;padding-top: 20px;padding-bottom: 20px">
                                <h5 style="margin-bottom: 10px;margin-left: 10px">点击添加头像</h5>
                                <img id="head" src="/img/index.jpg" alt="img" style="width: 100px;height: 100px">
                                <div style="float: right;margin-right: 600px">
                                    <p>
                                        <span style="font-weight: bold">用户编号： </span>
                                        <span th:text="${user.userId}" class="userId"></span>
                                        <br>
                                        <span style="font-weight: bold">用户姓名： </span>
                                        <span th:text="${user.account}" class="userName"></span>
                                        <br>
                                        <span style="font-weight: bold">用户邮箱： </span>
                                        <span th:text="${user.email}" class="email">未注册</span>
                                        <button type="button" class="btn btn-primary" style="margin-left: 10px" data-target="#emailModel" data-toggle="modal" th:if="${user.emailState eq -1}">验证邮箱</button>
                                        <br>
                                        <span style="font-weight: bold">用户手机： </span>
                                        <span th:text="${user.phone}" class="phone"></span>
                                        <br>
                                        <span style="font-weight: bold">注册时间： </span>
                                        <span th:text="${user.register_time}"></span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--头像上传-->
<div class="modal fade" id="headModel" aria-labelledby="headModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h2 class="modal-title" id="headModalLabel">上传头像</h2>
            </div>
            <div class="ibox-content">
                <form class="dropzone">
                    <div id="imgPreview">
                        <div id="prompt3">
	                        <span id="imgSpan">
	                            点击上传
                                <br/>
	                            <i class="fa fa-plus"></i>
	                        </span>
                            <input type="file" id="file" name="file" class="filepath" onchange="changepic(this)"
                                   accept="image/jpg,image/jpeg,image/png,image/PNG" required='required'>
                        </div>
                        <img src="" id="img3" alt="img"/>
                        <div style="margin-top: 60px;float: right">
                            <button type="reset" class="btn btn-primary" name="reset">重置</button>
                            <button type="button" class="btn btn-primary" style="margin-left: 40px" id="btn-head">提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!--修改按钮-->
<div class="modal fade" id="updateModel" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title" id="updateModalLabel">个人信息编辑</h5>
            </div>
            <form id="formData" class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateUserId">借书编号:</label>
                        <div class="col-lg-9">
                            <input type="text" id="updateUserId" name="updateUserId" placeholder="" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateUserName">姓名:</label>
                        <div class="col-lg-9">
                            <input type="text" id="updateUserName" name="updateUserName" placeholder="" class="form-control" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updateEmail">邮箱:</label>
                        <div class="col-lg-9">
                            <input type="text" id="updateEmail" name="updateEmail" placeholder="" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="updatePhone">电话:</label>
                        <div class="col-lg-9">
                            <input type="text" id="updatePhone" name="updatePhone" placeholder="" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button class="btn btn-success" type="button" id="updateBtn">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--验证按钮-->
<div class="modal fade" id="emailModel" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h5 class="modal-title" id="emailModalLabel">请输入验证码</h5>
            </div>
            <form class="form-horizontal">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="control-label col-lg-2" for="key">验证码:</label>
                        <div class="col-lg-9">
                            <input type="text" id="key" name="key" placeholder="" class="form-control" required>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" type="button" data-dismiss="modal">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    <button class="btn btn-success" type="button" id="key-btn">
                        <span class="glyphicon glyphicon-ok"></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="/js/jQuery.min.js"></script>
<script src="/js/plugins/toastr/toastr.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap/js/bootstrap-editable.js"></script>
<script src="/bootstrap/js/bootstrap-table.min.js"></script>
<script src="/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/hplus.js?v=2.2.0"></script>
<script src="/js/plugins/pace/pace.min.js"></script>
<script src="js/index.js"></script>
<script src="/js/personinfo.js"></script>

<script>
    function changepic() {
        $("#prompt3").css("display", "none");
        var reads = new FileReader();
        f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function(e) {
            document.getElementById('img3').src = this.result;
            $("#img3").css("display", "block");
        };
    }
</script>
</html>
